<template>
  <div class="about">
    <h1 @click="toHome">点击跳转到home页面</h1>
    <h2>name:{{ name }}</h2>
    <h2>studentId:{{ studentId }}</h2>
    <button @click="handleClick">弹框</button>
  </div>
</template>
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'

interface studentData {
  name?: string,
  age: number,
  handleClick(): void // 函数在接口中的定义方式
}
const router = useRouter()
const listData = reactive({
  name: 'lili酱',
  age: 22,
  handleClick: (): void => {
    ElMessage('我是弹框...')
  }
} as studentData)
const { name, handleClick } = toRefs(listData) // 将reactive中的数据结构出来（使用toRefs结构会使数据重新获得响应性）
const studentId = ref(123456) // 创建变量
const toHome = (): void => {
  router.push({
    path: '/'
  })
  console.log('about')
}
onMounted(() => {
  console.log(router.currentRoute.value.query.id) // 获取传入的参数
})
</script>
